{% extends 'base_dashboard.html' %}

{% block title %}{{ inquiry.reference }} — {{ site_settings.institute_name }}{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-start mb-4">
  <div>
    <h4 class="fw-bold mb-1">{{ inquiry.subject }}</h4>
    <p class="text-muted small mb-0">{{ inquiry.reference }} · {{ inquiry.created_at|date:"d M Y H:i" }}</p>
  </div>
  <a href="{% url 'support:contact_inquiries' %}" class="btn btn-outline-secondary btn-sm">
    <i class="bi bi-arrow-left me-1"></i>Back
  </a>
</div>

<div class="row g-4">
  <div class="col-lg-8">
    <div class="card border-0 shadow-sm rounded-4 mb-4">
      <div class="card-body p-4">
        <div class="mb-3">
          <span class="badge bg-light text-dark border">{{ inquiry.get_topic_display }}</span>
          {% if inquiry.is_resolved %}
            <span class="badge bg-success-subtle text-success">Resolved</span>
          {% else %}
            <span class="badge bg-warning-subtle text-warning">Open</span>
          {% endif %}
        </div>
        <p class="mb-0" style="white-space:pre-wrap;">{{ inquiry.message }}</p>
      </div>
    </div>

    <div class="card border-0 shadow-sm rounded-4">
      <div class="card-body p-4">
        <h6 class="fw-bold mb-3">Staff notes</h6>
        <form method="post">
          {% csrf_token %}
          <input type="hidden" name="action" value="notes">
          <textarea name="staff_notes" class="form-control mb-3" rows="4" placeholder="Internal notes…">{{ inquiry.staff_notes }}</textarea>
          <button class="btn btn-outline-primary btn-sm">Save notes</button>
        </form>
      </div>
    </div>
  </div>

  <div class="col-lg-4">
    <div class="card border-0 shadow-sm rounded-4 mb-3">
      <div class="card-body p-4">
        <h6 class="fw-bold mb-3">Contact</h6>
        <div class="small mb-2"><strong>Name:</strong> {{ inquiry.name }}</div>
        <div class="small mb-2"><strong>Email:</strong> <a href="mailto:{{ inquiry.email }}">{{ inquiry.email }}</a></div>
        {% if inquiry.phone %}<div class="small mb-2"><strong>Phone:</strong> {{ inquiry.phone }}</div>{% endif %}
        {% if inquiry.user %}
        <div class="small text-muted">Linked account: {{ inquiry.user.username }}</div>
        {% endif %}
      </div>
    </div>

    <div class="d-grid gap-2">
      {% if not inquiry.is_resolved %}
      <form method="post">
        {% csrf_token %}
        <input type="hidden" name="action" value="resolve">
        <button class="btn btn-success w-100">Mark resolved</button>
      </form>
      {% else %}
      <form method="post">
        {% csrf_token %}
        <input type="hidden" name="action" value="reopen">
        <button class="btn btn-outline-warning w-100">Reopen</button>
      </form>
      {% endif %}
      {% if user.role == 'admin' %}
      <form method="post" onsubmit="return confirm('Delete this inquiry?');">
        {% csrf_token %}
        <input type="hidden" name="action" value="delete">
        <button class="btn btn-outline-danger w-100">Delete</button>
      </form>
      {% endif %}
    </div>
  </div>
</div>
{% endblock %}